<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Manipulation</title>
<script>
function moveUp(listId, itemId) {
  const list = document.getElementById(listId);
  const item = document.getElementById(itemId);
  const index = Array.from(list.children).indexOf(item);
  if (index > 0) {
    list.insertBefore(item, list.children[index - 1]);
  }
}
 
function moveDown(listId, itemId) {
  const list = document.getElementById(listId);
  const item = document.getElementById(itemId);
  const index = Array.from(list.children).indexOf(item);
  if (index < list.childElementCount - 1) {
    list.insertBefore(item, list.children[index + 1].nextElementSibling);
  }
}
 
function deleteItem(listId, itemId) {
  const list = document.getElementById(listId);
  const item = document.getElementById(itemId);
  list.removeChild(item);
}
 
function addItem(listId) {
  const list = document.getElementById(listId);
  const newItem = document.createElement('li');
  newItem.innerHTML = 'New Item';
  list.appendChild(newItem);
}
</script>
</head>
<body>
<ul id="myList">
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
</ul>
 
<button onclick="moveUp('myList', 'item2')">Move Up</button>
<button onclick="moveDown('myList', 'item2')">Move Down</button>
<button onclick="deleteItem('myList', 'item2')">Delete</button>
<button onclick="addItem('myList')">Add Item</button>
</body>
</html>